<template>
  <div class="app">
    <!-- (1) :data="state" 这种写法使用了:data属性来传递state作为props给Editor组件。
    这意味着state是单向传递给Editor组件的，
    Editor组件不能直接修改state的值，它只能读取这个值。如果Editor组件需要修改state，
    它必须通过事件来通知父组件进行修改。
    (2) v-model="state" 双向数据绑定
    当使用<Editor v-model="state"></Editor>时，Vue会自动将state的值传递给Editor组件的value prop，
    并监听Editor组件发出的update:value事件来更新state。
    这意味着Editor组件可以直接修改state的值，而不需要通过事件通知父组件。-->
    <!-- <Editor :data="state"></Editor> -->
    <Editor v-model="state"></Editor>
  </div>
</template>

<script>
import { ref, provide } from 'vue'; 
import data from './data.json';
import Editor from './packages/editor';
import { registerConfig as config } from './utils/editor-config';
export default{
  //注册组件
  components:{
    Editor
  },
  //整个项目的入口
  setup(){
    const state = ref(data);
    /*
    ** provide  的目的**：
      provide  函数是 Vue 的依赖注入系统的一部分。它允许父组件将某些数据或属性提供给其后代组件，
      而无需通过 props 显式传递。这在深层嵌套的组件中尤其有用。

      关键功能：
      在  provide('config', config);  这一行中，第一个参数  'config'  是提供的值可以被访问的键。
      第二个参数  config  是被提供的值，在此情况下是从  editor-config  导入的。
      任何后代组件（子组件或更深层的组件）如果想要访问这个提供的值，可以使用相同的键调用  inject  函数。

    */
    provide('config',config);//将组件的配置 直接

    return{
      state
    }
  }
}
</script>

<style lang="scss">
.app{
  position:fixed;
  top:20px;
  left:20px;
  right:20px;
  bottom:20px;
}
</style>
